<template>
	<div class="Echarts"> 
		<div ref="myChart" id="myChart"  class="inMain" style="width: 404px;height: 210px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'internationEc3',
		data() {
			return{
				cockpitData:[],
				categoryxcl:[],
				categoryxt:[],
				ratioxcl:[],
				ratioxt:[]
			}
		},
		mounted() {
			this.getData();
			// this.myEcharts();
		},
		methods: {
			getData(){
				var dt = {
					"params": {
						"normGuid": "ce30a423-726c-49d0-8f5e-afd624cc3bed",
						"fieldList": []
					}
				};
				this.$axios.post('components/hw1/dcockpit/rest/cockpitApi/searchListNormResult', dt)
					.then(response=> {
						this.cockpitData=response.data.custom.result.cockpitData;
						console.log(this.cockpitData)
						let itemData = this.cockpitData.map(item=>{
							return item.total;
						});
						let itemTitle = this.cockpitData.map(item=>{
							return item.province;
						});
						this.categoryxcl = itemTitle.slice(5,10);
						this.categoryxt = itemTitle.slice(0,5);
						this.ratioxcl = itemData.slice(5,10);
						this.ratioxt = itemData.slice(0,5);
						this.$nextTick(()=>{
							this.myEcharts();
						})
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			myEcharts() {
				console.log(this.categoryxcl,this.ratioxcl)
				let dataTemp1 = this.ratioxcl;
				let dataTemp2 = this.categoryxcl;
				
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;
				// let datalist = [{value:10,name:'国家重点实验室'},{value:10,name:'国家工程技术研究中心'},{value:10,name:'国家地方联合工程实验室'},
				// {value:10,name:'省级制造业创新中心'},{value:10,name:'重点院校宁波研究院'}];
				let myColor=['#04CDF4','#E3A693','#D5A4E2','#FACD91','#1D96FC','#5B7082']
				let datalist=[];
				let sumNum=0;
				for (let i in dataTemp2) {
					sumNum+=dataTemp1[i]
					// let label={
					// 	show:false
					// }
					// if(i<dataTemp2.length-1){
					// 	label={
					// 		show:true,
					// 		fontSize: 13,
					// 		formatter: function (params) {
					// 			let p =(dataTemp1[i] / sumNum*100 ).toFixed(0);
					// 			return dataTemp1[i]+'项 '+ '{a|' + p + '%' + '}';
					// 		},
					// 		rich:{
					// 			a:{
					// 				fontSize: 13,
					// 				color: '#00D8FF ',
					// 			}
					// 		}
					// 	}
					// }
					let label={
						show:true,
						fontSize: 13,
						formatter: function (params) {
							let p =(dataTemp1[i] / sumNum*100 ).toFixed(0);
							return dataTemp1[i]+'项 '+ '{a|' + p + '%' + '}';
						},
						rich:{
							a:{
								fontSize: 13,
								color: '#00D8FF ',
							}
						}
					}
					datalist.push({
							value: dataTemp1[i],
							name: dataTemp2[i],
							label:label
						})
				}
				//配置图表
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				const option = {
					backgroundColor: 'rgba(3, 16, 38, 0.71)',
					color:myColor,
					title:{
						x: '1%',
						y: '1%',
						text: '{a|' + '全国前5名占比' + '}',
						textStyle:{
							color:'#FFFFFF',
							fontSize: 15,
							lineHeight: 20,
							rich:{
								a:{
									fontSize: 20,
									color: '#00D8FF ',
								}
							}
						},
					},
					tooltip: {
						show: false,
					},
					legend: {
						show: true,
						// orient: 'vertical',
						itemWidth: 10,
						itemHeight: 10,
						left: '2%',
						bottom:'3%',
						itemGap:25,
						textStyle: {
						      color: "#FFFFFF",
							  fontSize:13
						},
						formatter: '{name}'
					},
					grid: {
						left: '3%',
						top: '10%',
						width: "100%",
						height:'90%',
						containLabel: true
					},
					series: [{
					      type: 'pie',
					      radius: ['25%','40%'],
						  center:['50%','50%'],
						  itemStyle: {
						     borderColor: 'rgba(3, 16, 38, 0.6)',
						     borderWidth: 2
						  },
					      data: datalist, 
					    }]
				};
				myChart.setOption(option);
			}
		}
		
	}
</script>


<style>

</style>
